<template>
  <el-card class="introduce-item content-card">
    <template #header>
      <span>{{ props.title }}</span>
      <el-tag v-if="tag" type="success">{{ tag }}</el-tag>
      <el-tooltip v-if="desc" content="说明" effect="dark" placement="top" popper-class="popper_class20">
        <span class="title-tip-icon">
          <SvgIcon icon="info"/>
        </span>
        <template #content>
          <span>{{ desc }}</span>
        </template>
      </el-tooltip>
    </template>

    <span class="digit">{{ props.count }}</span>

    <div class="introduce-content">
      <slot/>
    </div>

    <el-divider class="divider"/>

    <el-row class="summary-footer">
      <el-col :span="12">{{ props.footerLabel }}</el-col>
      <el-col :span="12" class="text-right">{{ props.footerValue }}</el-col>
    </el-row>
  </el-card>
</template>

<script lang="ts" setup>
import { SvgIcon } from '@/components/icon';

const props = defineProps({
  title: String,
  tag: String,
  desc: String,
  count: [String, Number],
  footerLabel: String,
  footerValue: String,
});
</script>

<style lang="scss" scoped>
.introduce-item {
  overflow: initial;

  :deep(.el-card__body) {
    padding: 12px 14px;

    .digit {
      font-size: 21px;
    }

    .introduce-content {
      height: 28px;
      position: relative;
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      align-items: end;
    }

    .divider {
      margin: 12px 0;
    }

    .summary-footer {
      color: var(--el-text-color-regular);
    }
  }

  .title-tip-icon {
    font-size: 16px;
    cursor: pointer;
  }
}
</style>
